<template>
  <div class="hmx-tabs">
    <template v-for="item in tabList" :key="item.value">
      <div
        @click="handleClick(item)"
        :class="{ active: isTab === item.label, small: size === 'small' }"
      >
        {{ item.value }}
      </div>
    </template>
  </div>
</template>

<script setup name="ConfigTab">
import { computed, defineProps, defineEmits } from "vue"

const props = defineProps({
  tabList: {
    //传进来的tab项
    // 格式为{value:,label:}
    type: Array,
    default: () => [],
    required: true,
  },
  modelValue: {
    //当前选中tab
    type: [String, Number],
    default: "",
  },
  size: {
    // 是否small样式
    type: String,
    default: "large",
  },
})

let isTab = computed(() => props.modelValue)

const emit = defineEmits(["update:modelValue", "item-click"])

const handleClick = item => {
  emit("item-click", item)
}
</script>

<style lang="scss" scoped>
.hmx-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  > div {
    flex: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    height: 30px;
    color: #000000;
    border-radius: 5px;
  }
  .active {
    background: #d3eafe;
    color: #0084fe;
  }
}
</style>
